<template>
	<view>
		<view class="l1" :style="{ height: height + 'px' }" style="width: 90%;overflow: hidden;border-radius: 8px;margin: auto;position: relative;">
			<image :src="bg[0].background_image" style="width: 100%;" mode="widthFix"></image>
			<view @click="show = true" style="position: absolute;z-index: 1;width: 100%;line-height: 36px;text-align: center;color: #fff;top: 40px;left: 0;">{{ text }}</view>
			<view style="position: absolute;z-index: 1;width: 100%;line-height: 36px;text-align: center;color: #fff;bottom: 20px;left: 0;">
				<image :src="emoimg.icon_image" style="width: 30px;" mode="widthFix"></image>
			</view>
		</view>
		<view class="flex a-t" style="box-sizing: border-box;padding: 0 20px;margin-top: 10px;">
			<view @click="left(1)"><u-icon name="arrow-left"></u-icon></view>
			<view style="width:280px;margin: auto;overflow: hidden;">
				<view class="flex a-t" :style="{ width: width + 'px' }">
					<view
						@click="left(3, index)"
						:class="index == 0 ? 'list1' : ''"
						v-for="(item, index) in bg"
						class="list"
						style="overflow: hidden;float: left;margin-right: 10px;position: relative;"
					>
						<view
							@click="jiesuo(item)"
							v-if="item.lock_switch == 1 && item.unlocked_count == 0"
							class="mb"
							style="position: absolute;width: 100%;height: 100%;background: rgab(0,0,0,0.4);color: #fff;font-size: 12px;top: 0;left: 0;text-align: center;"
						>
							点击解锁
						</view>
						<image :src="item.background_image" style="width:100%;" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view @click="left(2)"><u-icon name="arrow-right"></u-icon></view>
		</view>
		<view class="flex a-t" style="width: 300px;margin: auto;padding: 10px 0;">
			<image v-if="index < 50" @click="emo(item)" v-for="(item, index) in emolist" :src="item.icon_image" style="width: 30px;" mode="widthFix"></image>
		</view>
		<u-popup v-model="show" mode="center">
			<view style="width: 280px;padding: 20px;">
				<view><u-input v-model="content" value="" :type="inputType" :border="border" :height="height" :auto-height="autoHeight" /></view>
				<view style="margin-top: 20px;">
					<view @click="queding" class="button f14" style="width: 120px; text-align: center; line-height: 40px;margin: auto;">确定</view>
				</view>
			</view>
		</u-popup>
		<view
			@click="submit"
			class="button f14"
			style="width: 120px; text-align: center; line-height: 40px;position: fixed; z-index: 1;bottom: 50px; left: 50%; margin-left: -60px; "
		>
			确认保存
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// value:'',
			inputType: 'textarea',
			border: true,
			height: 100,
			autoHeight: true,
			show: false,
			list: [],
			emoimg: {
				icon_image: 'https://s2.ax1x.com/2020/03/05/3oxtkF.th.png'
			},
			text: '点击这里输入文字',
			bg: [],
			bgimg: '',
			width: 0,
			emolist: [],
			content: '',
			form: {},
			type: 0
		};
	},
	onLoad(e) {
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#ffffff'
		});
		if (e.item) {
			console.log(JSON.parse(e.item));
			this.form = JSON.parse(e.item);
			this.text = JSON.parse(e.item).content;
			this.emoimg.icon_image = JSON.parse(e.item).emoji;
			this.type = 1;
		}
		// for(let i=100; i<120;i++){
		// 	let img='https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/emoji/'+i+'.gif'
		// 	this.list.push(img)
		// }
		this.ribg();
		this.emoji();
	},
	methods: {
		//提交
		async submit() {
			let data = {
				my_space_id: this.vuex_user_content.id,
				diary_id: this.bg[0].id,
				content: this.text,
				emoji: this.emoimg.icon_image
			};
			console.log(data, '1111');
			var name = '';
			if (this.type == 1) {
				data.record_id = this.form.id;
				name = '编辑成功';
			} else {
				name = '提交成功';
			}
			let res = await this.$u.api.write(data);
			uni.showToast({
				title: name,
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 500);
			console.log(res);
		},

		// 表情
		async emoji() {
			let res = await this.$u.api.emoji();
			this.emolist = res;
			// this.emoimg = res[0];
		},
		async jiesuo(e) {
			let data = {
				my_space_id: this.vuex_user_content.id,
				diary_id: e.id
			};
			let res = await this.$u.api.unlock(data);
			console.log(res);
			e.unlocked_count = 1;
			// this.ribg()
		},
		left(e, index) {
			if (e == 1) {
				let i1 = this.bg[0];
				this.bg.splice(0, 1);
				this.bg.push(i1);
			}
			if (e == 2) {
				let i2 = this.bg[this.bg.length - 1];
				this.bg.splice(this.bg.length - 1, 1);
				this.bg.unshift(i2);
			}
			if (e == 3) {
				let i2 = this.bg[index];
				this.bg.splice(index, 1);
				this.bg.unshift(i2);
			}
		},
		async ribg() {
			let res = await this.$u.api.diary_list();
			console.log(res, 'ffff');
			this.bg = res;
			this.width = (res.length - 1) * 90 + 110;
			this.bgimg = res[0].background_image;
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query
					.selectAll('.l1')
					.boundingClientRect(data => {
						console.log('得到布局位置信息', data);
						console.log('节点离页面顶部的距离为' + data);
						this.height = data[0].width;
					})
					.exec();
			}, 200);
		},
		emo(e) {
			this.emoimg = e;
		},
		queding() {
			if (!this.content) {
				return uni.showToast({
					title: '请输入文字',
					icon: 'none'
				});
			}
			this.text = this.content;
			this.show = false;
		}
	}
};
</script>

<style>
page {
	background: #fff;
}
.list {
	width: 80px;
	height: 80px;
	line-height: 80px;
}
.list .mb {
	line-height: 80px;
}
.list1 {
	width: 100px;
	height: 100px;
	line-height: 100px;
}
.list1 .mb {
	line-height: 100px;
}
</style>
